<template>

  <div>
    <el-main>
      <div style="overflow: hidden">
        <div style="margin-left: 10%; width: 20%;height:500px;display: inline-block;overflow: hidden">
          <template>
            <el-carousel indicator-position="outside" height="300px">
              <el-carousel-item v-for="img in imgs">
                <img :src="img.url" alt="" width="100%" height="300">
              </el-carousel-item>
            </el-carousel>
          </template>
          <a href=""><img src="imgs/advertising1.jpg" alt="" width="100%"></a>
        </div>
        <div style="width: 40%;height:500px;display:inline-block;margin-top:10px;margin-left:10px;overflow: hidden">
          <p style="font-weight: bold;font-size: 18px;">{{ goods.name }}</p>
          <p style="font-size: 12px">{{ goods.describe }}</p>
          <p style="font-size: 12px;display: inline;">作者: <a href=""
                                                             style="color:#1a66b3;font-size: 12px">{{
              goods.author
            }}</a>
            著,
            <a href="" style="color:#1a66b3;font-size: 12px">书田文话</a>出品</p>
          <p style="font-size: 12px;display: inline;margin-left: 30px;">出版社: <a href=""
                                                                                style="color:#1a66b3;font-size: 12px">{{
              press.name
            }}</a>
          </p>
          <p style="font-size: 12px;display: inline;margin-left: 30px;">出版时间:<a>{{ goods.houseTime }}</a></p>
          <div class="block" style="margin-top: 15px;margin-bottom: 15px;">
            <el-rate v-model="value1" style="display: inline"></el-rate>
            <p style="font-size: 12px;display: inline;"><a href="">{{ CommentCount }}</a> 条评论</p>
          </div>
          <div
              style="width: 100%;height: 100px;background-color: #fcfaf7;margin: 0 auto ;align-content: center !important;">
            <p style="display: inline;font-size: 12px">抢购价</p>
            <a href="" style="color:#1a66b3;font-size: 12px;margin-left: 10px;display: inline">降价通知</a>
            <p style="display: inline;font-size: 12px;margin-left: 50px">电子书价</p><br>
            <p style="display: inline-block">¥</p>
            <p style="display: inline;font-size: 26px;color: red">{{ discount }}</p>
            <p style="display: inline;font-size: 12px;color: red">(5折)</p>
            <p style="display: inline-block;margin-left: 35px">¥</p>
            <a style="display: inline;font-size: 26px;color: #1a66b3" href="">{{ goods.money }}</a><br>
            <p style="display: inline-block;font-size: 12px">定价</p>
            <p style="display: inline;font-size: 12px;"><s>{{ goods.money }}</s></p>
          </div>
          <p style="display:inline;ont-size: 12px;">领劵:</p>
          <el-button type="text" @click="dialogTableVisible = true"
                     style="color:white;height: 30px;background-color: #ff6666;padding: 0 0;margin-top: 10px">
            满100减50
          </el-button>
          <el-dialog title="优惠券" :visible.sync="dialogTableVisible">
            <img width="300px" height="200px"
                 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171031%2F74f28680aca64e6a8fc338ad378c9db4.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668940177&t=d702f1288c3bfbc5fee07c489bc0f996"
                 alt="">
            <br>
            <el-button type="text" @click="open()"
                       style="color:white;height: 30px;width: 50px;background-color: #ff6666;padding: 0 0;margin-top: 10px">
              领取
            </el-button>
          </el-dialog>
          <hr style="border: 1px dashed #646464;">
          <p style="display: inline-block;font-size: 12px">配送至</p>
          <el-cascader :options="options"></el-cascader>
          <p style="display: inline; margin-left:10px;margin-right: 10px"><b>有货</b></p>
          <p style="display: inline;">免运费</p>
          <p style="font-size: 12px">服&emsp;务
            &emsp;&emsp;由“<b>当当</b>”发货，并提供售后服务。 22:25前完成下单，预计明天可送达</p>
          <el-input-number v-model="num" size="mini" controls-position="right" @change="handleChange" :min="1"
                           :max="10000000"></el-input-number>
          <el-button type="warning" icon="el-icon-star-off" circle @click="collectionAddNew()"></el-button>收藏
          <el-button type="danger" icon="el-icon-shopping-cart-2" @click="shoppingCarAdd()">加入购物车</el-button>

        </div>
        <div style="width: 25%;height:500px;display: inline-block;margin-left: 10px;overflow: hidden">
          <el-card class="box-card" style="height: 100%">
            <div slot="header" class="clearfix">
              <span style="color: red;">书笺小驿</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="returnindex()">返回首页
              </el-button>
            </div>
            <div class="text item" style="margin:0 auto;padding-top: 20px;">

              <a href="" style="font-size: 12px;color: #855758"><i class="el-icon-medal-1"></i> 正品保障</a>

              <a href="" style="font-size: 12px;color: #855758;"> <i class="el-icon-loading"
                                                                     style="margin-left: 30%"></i> 服务支持</a>
            </div>
            <div style="margin:0 auto;padding-top: 20px">
              <a href="" style="font-size: 12px;color: #855758"><i class="el-icon-position"></i> 差价返还</a>
              <a href="" style="font-size: 12px;color: #855758;"><i class="el-icon-star-off"
                                                                    style="margin-left: 30%"></i>15天换货</a>
            </div>
            <div style="padding-top: 20px">
              <a href="" style="font-size: 12px;color: #855758"><i class="el-icon-present"></i>礼品包装</a>
            </div>
            <div style="padding-top: 20px">
              <a href="" style="font-size: 12px;color: #855758"><i class="el-icon-trophy-1"></i> 支持7天无理由退货</a>
            </div>
            <div style="padding-top: 20px">
              <a href="" style="font-size: 12px;color: #855758"> <i class="el-icon-collection"></i> 支持礼品卡</a>
            </div>
            <div style="padding-top: 20px">
              <a href="" style="font-size: 12px;color: #855758"><i class="el-icon-bell"></i> 支持当当V卡</a>
            </div>
            <div style="padding-top: 20px">
              <a href="" style="font-size: 12px;color: #855758"><i class="el-icon-circle-check"></i>企业批量采买</a>
            </div>

          </el-card>
        </div>
      </div>
      <div style="margin-left:10%;" property="评论">
        <div style="width: 250px;">
          <el-card class="box-card" style="height:100%; ">
            <div slot="header" class="clearfix">
              <span style="font-size: 16px;font-weight: bold;text-align: center;display:block;">推荐书籍</span>
            </div>
            <div class="text item" style="margin: 0 auto" v-for="arr in goodsIimit1">
              <img :src="arr.url" height="100px" width="100px" alt="" style="margin-left: 45px"><br>
              <span style="text-align: center;display:block;margin-bottom: 30px;"><a :href="'/deil?id='+arr.id">{{ arr.name }}</a></span>
            </div>
          </el-card>
        </div>
        <div style="display: inline-block;overflow: hidden;margin-left:20px;height: 100%">
          <el-tabs style="width: 500px" v-model="activeName">
            <el-tab-pane label="商品详情" name="first">
              <img v-for="img in imgs" :src="img.url" height="400px" width="400px" alt="">
            </el-tab-pane>
            <el-tab-pane :label="CommentCount1" name="second">
              <span v-for="c in comments">
              <p>{{ c.comments }}</p><br>
                <el-divider content-position="left">来自<a href="">{{ c.nickName }}</a>的评论</el-divider>
               </span>
              <el-input v-model="input" placeholder="请输入您的评论" style="margin-top: 20px"></el-input>
              <el-button type="primary" style="margin-top: 20px" @click="commentAdd1()">评论</el-button>
            </el-tab-pane>
            <!--            <el-tab-pane label="商品问答" name="third">

                        </el-tab-pane>-->
          </el-tabs>
        </div>
      </div>
    </el-main>
  </div>

</template>

<script>
export default {
  data() {
    return {
      collection:{},
      user:{},
      goods: {
        id: '',
        name: '',
        author: '',
        money: '',
        pressId: '',
        houseTime: '',
        describe: '',
        num: ''
      },
      discount: '',
      press: {
        id: '',
        name: ''
      },
      CommentCount: '',
      CommentCount1: '',
      comments: [{id: '', nickName: '', comments: ""}],
      imgs: [],
      value1: "",
      input: '',
      commentAdd: {
        uId: '',
        gId: '',
        comments: ''
      },
      shoppingCarAddNew: {
        uId:0,
        gId: '',
        snum: ''
      },
      goodsIimit1: [],
      dialogTableVisible: false,
      options: [{
        value: 'sahnxi',
        label: '山西省',
        disabled: false,
        children: [{
          value: 'taiyuan',
          label: '太原市',
          children: [{
            value: 'wanbailin',
            label: '万柏林区'
          }, {
            value: 'xiaodianqu',
            label: '小店区'
          }, {
            value: 'xinghualingqu',
            label: '杏花岭区'
          }, {
            value: 'jiancaopingqu',
            label: '尖草坪区'
          }]
        }]
      }, {
        value: 'beijing',
        label: '北京',
        children: [{
          value: 'zhaoyangqu',
          label: '朝阳区',
        }]
      }],
      num: 1,
      activeName: 'first'
    };
  },
  methods: {
    collectionAddNew(){
      let url = "http://localhost:8080/shoppingCar/getUserLogin";
      this.axios.get(url).then((response)=>{
            if (response.data.data==null){
              location.href="/userlogin";
              return;
            }
        let responseBody = response.data;
        this.user = responseBody.data;
        console.log("555-----------"+this.shoppingCarAddNew.uId);
        console.log("用户信息"+this.user.id);
        this.collection.uId = this.user.id;
        this.collection.gId = this.goods.id;
        let formData = this.qs.stringify(this.collection);
        console.log("添加收藏:"+formData);
        url = 'http://localhost:8080/collection/addNew';
        this.axios.post(url,formData).then((response)=>{
          console.log("添加收藏:"+formData);
          location.href="/information/collection";
        })
      })
    },
    shoppingCarAdd(){
      let url = "http://localhost:8080/shoppingCar/getUserLogin";
      this.axios.get(url).then((response)=>{
        if (response.data.data==null){
          location.href="/userlogin";
          return;
        }
        let responseBody = response.data;
        this.user = responseBody.data;
        console.log("555-----------"+this.shoppingCarAddNew.uId);
        console.log("用户信息"+this.user.id);
        let uId = this.user.id;
        this.shoppingCarAddNew.uId = uId;
        this.shoppingCarAddNew.gId =this.goods.id;
        this.shoppingCarAddNew.snum = this.num;
        console.log("666-----------"+this.shoppingCarAddNew.uId);
        let formData = this.qs.stringify(this.shoppingCarAddNew);
        console.log("添加购物车:"+formData)
        url = 'http://localhost:8080/shoppingCar/insert';
        this.axios.post(url,formData).then((response)=>{
          console.log("添加购物车:"+formData);
          location.href="/shoppingCar";
        })
      });
    },
    goodsIimit() {
       let url = 'http://localhost:8080/goods/listLimit3';
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        console.log("获取到的商品:" + responseBody.data);
        this.goodsIimit1 = responseBody.data;

      });
    },
    commentAdd1() {
      let url = "http://localhost:8080/shoppingCar/getUserLogin";
      this.axios.get(url).then((response)=>{
        if (response.data.data==null){
          location.href="/userlogin";
          return;
        }
        let responseBody = response.data;
        this.user = responseBody.data;
        let uId = this.user.id;
        console.log("用户信息"+this.user.id);
        this.commentAdd.comments = this.input;
        this.commentAdd.gId = this.goods.id;
        this.commentAdd.uId = uId;
        let formData = this.qs.stringify(this.commentAdd);
        let url = 'http://localhost:8080/comment/addNew';
        this.axios.post(url, formData).then((response) => {
          location.reload();
        })
      });

    },
    open() {
      alert("领取成功!");
    },
    handleChange(value) {
      console.log(value);
    },
    returnindex() {
      location.href = "/"
    },
    standardById(id) {
      let url = 'http://localhost:8080/goods/ListByGoodId/';
      this.axios.get(url + id).then((response) => {
        let rosponseBody = response.data;
        console.log('-------------------------' + rosponseBody.data);
        this.goods = rosponseBody.data;
        this.discount = this.goods.money * 0.5;
      })
    },
    queryPress(id) {
      let url = 'http://localhost:8080/press/';
      this.axios.get(url + id).then((response) => {
        let rosponseBody = response.data;
        console.log('书籍出版社' + rosponseBody.data);
        this.press = rosponseBody.data;
      })
    },
    commentCount(id) {
      let url = 'http://localhost:8080/comment/commentCount/';
      this.axios.get(url + id).then((response) => {
        let rosponseBody = response.data;
        console.log('评论数量' + rosponseBody.data);
        this.CommentCount = rosponseBody.data;
        this.CommentCount1 = "商品评论(" + this.CommentCount + ")";
      })
    },
    comment(id) {
      let url = 'http://localhost:8080/comment/' + id + '/comments';
      this.axios.get(url).then((response) => {
        let rosponseBody = response.data;
        console.log('评论' + rosponseBody.data);
        this.comments = rosponseBody.data;
      })
    },
    queryImgs(id) {
      let url = 'http://localhost:8080/imgs/queryImgs/';
      this.axios.get(url + id).then((response) => {
        let rosponseBody = response.data;
        console.log('图片' + rosponseBody.data);
        this.imgs = rosponseBody.data;
      })
    }
  },
  mounted() {
    // this.axios.get("/index/selectBigType").then( (r) =>{
    //   this.bigtype=this.data;
    // })
    let id = location.search.split("=")[1];

    this.standardById(id);
    this.queryPress(id);
    this.commentCount(id);
    this.queryImgs(id);
    this.comment(id);
    this.goodsIimit();


  }
}
</script>

<style>
body {
  margin: 0 auto;
  color: #646464;
  font-size: 16px;
  position: relative;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

a {
  text-decoration: none;
  color: #646464;
  font-size: 16px
}

a:hover {
  color: red;
  position: relative;
  top: 0.5px;
}

.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 100%;
  margin-top: -20px;
  vertical-align: middle;
  position: relative;
}

.el-divider--horizontal {
  margin-left: 10px;
}

.box-card {
  float: left;
}

td > a {
  font-size: 12px;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 17px;
}

th {
  margin-right: 20px;
}
</style>